<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/img/logo.png"/>
    <title>启慧信息技术公司人事管理系统</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/mmss.css"/>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<section>
    <div class="container">
        <div class="row ">
            <div class="col-xs-12">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="/main"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">系统管理</li>
                    <li class="active">用户管理</li>
                </ol>
                <!--顶部搜索栏开始,按照指定的条件进行搜索-->
                <form th:action="@{/user/list}">
                    <div class="input-group line left">
                        <span class="input-group-addon" id="basic-addon2">
                            <span class="glyphicon glyphicon-search">
                            </span>
                        </span>

                        <input name="searchContent" type="text" class="form-control" placeholder="输入关键字搜索" aria-describedby="basic-addon2">
                    </div>
                    <select name = "option" class="form-control line left">
                        <option value="user_id">用户id</option>
                        <option value="sex">性别</option>
                        <option value="tel">电话</option>
                        <option value="address">地址</option>
                        <option value="email">邮件</option>
                        <option value="username">登录名</option>
                        <option value="password">密码</option>
                        <!--<option value="salt">盐</option>-->
                        <option value="user_state">状态</option>
                        <option value="description">描述</option>
                    </select>

                    <button shiro:hasPermission="user:search" type="submit" class=" btn btn-primary ">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                    <a shiro:hasPermission="user:add" href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add1">添加</a>
                </form>
                <br/><br/>
                <!--顶部搜索栏结束-->
                <!--table表用来显示数据-->
                <table class="table table-bordered  table-condensed table-striped text-center bg-info">
                    <!--表头信息开始-->
                    <thead>
                        <tr class="info">
                            <th class="text-center">编号</th>  <!--0-->
                            <th class="text-center">姓名</th>  <!--1-->
                            <th class="text-center">性别</th> <!--2-->
                            <th class="text-center">电话</th> <!--3-->
                            <th class="text-center">地址</th> <!--4-->
                            <th class="text-center">邮件</th> <!--5-->
                            <th class="text-center">登录名</th> <!--6-->
                            <th class="text-center">密码</th> <!---7->
                            <th class="text-center" >盐值</th>-->
                            <!--<th class="text-center">状态</th>-->
                            <th class="text-center">描述</th>  <!--8-->
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <!--表头信息结束-->
                    <!--表数据开始-->
                    <tbody>
                        <!--输出封装在model中的pageInfo数据-->

                        <tr th:each="User:${pageInfo.getResult()}">
                            <td th:text="${User.userId}"></td>
                            <td th:text="${User.name}"></td>
                            <td th:text="${User.sex}"></td>
                            <td th:text="${User.tel}"></td>
                            <td th:text="${User.address}"></td>
                            <td th:text="${User.email}"></td>
                            <td th:text="${User.username}"></td>
                            <td th:text="${User.password}"></td>
                            <!--<td th:text="${User.salt}" ></td>-->
                            <!--<td th:text="${User.userState}"></td>-->
                            <td th:text="${User.description}"></td>
                            <td>
                                <a  shiro:hasPermission="user:edit" onclick="editMessage(this)"
                                class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit">编辑</a>
                                <a shiro:hasPermission="user:del"
                                   class="btn btn-warning btn-sm"  th:onclick="|delUser(${User.userId})|">删除</a>
                                <a shiro:hasPermission="user:role" href="#FProle1" onclick="roleEcho(this)"
                                   class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">分配角色</a>
                            </td>
                            <!--模态框开始-->
                            <!--添加模态框开始-->
                                <div class="modal fade" id="add1" tabindex="-1" role="dialog"  aria-labelledby="add11">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="add11">添加</h4>
                                            </div>
                                            <form th:action="@{/user/add}" method="post">
                                                <div class="modal-body">
                                                    <ul>
                                                        <li class="form-inline">
                                                            <label><span>姓名</span></label>
                                                            <input type="text" name="name"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>性别</span></label>
                                                            <select class="form-control form-group-sm" name="sex">
                                                                <option value="男">男</option>
                                                                <option value="女">女</option>
                                                            </select>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>电话</span></label>
                                                            <input type="text" name="tel"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>地址</span></label>
                                                            <input type="text" name="address"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>邮件</span></label>
                                                            <input type="text" name="email"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>登录名</span></label>
                                                            <input  class="control-label" onchange="checkUsername()" type="text" name="username"/>
                                                        </li>
                                                        <li class="form-inline">
                                                            <label><span>密码</span></label>
                                                            <input type="password" name="password"/>
                                                        </li>
                                                        <!--<li>-->
                                                        <!--    <label><span>盐</span></label>-->
                                                        <!--    <input type="text" name="salt"/>-->
                                                        <!--</li>-->

                                                       <!-- <li class="form-inline">
                                                            <label><span>状态</span></label>
                                                            <input type="text" name="userState"/>
                                                        </li>-->
                                                        <li class="form-inline">
                                                            <label><span>描述</span></label>
                                                            <input type="text" name="description"/>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <!--模态框底部的取消和保存按钮-->
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                                                        取消
                                                    </button>
                                                    <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            <!--添加模态框结束-->
                            <!--修改模态框开始-->
                            <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                                            <h4 class="modal-title" id="myModalLabel1">编辑</h4>
                                        </div>
                                        <form th:action="@{/user/edit}" method="post">
                                            <div class="modal-body">
                                                <ul>
                                                    <li hidden="hidden">
                                                        <label><span>用户名id</span></label>
                                                        <input type="hidden" readonly name="userId" id="userId"/>
                                                    </li>
                                                    <li>
                                                        <label><span>姓名</span></label>
                                                        <input type="text" name="name" id="name"/>
                                                    </li>
                                                    <li  class="form-inline">
                                                        <label><span>性别</span></label>
                                                        <select class="form-control form-group-sm" name="sex">
                                                            <option value="男">男</option>
                                                            <option value="女">女</option>
                                                        </select>
                                                    </li>
                                                    <li>
                                                        <label><span>电话</span></label>
                                                        <input type="text" name="tel" id="tel"/>
                                                    </li>
                                                    <li>
                                                        <label><span>地址</span></label>
                                                        <input type="text" name="address" id="address"/>
                                                    </li>
                                                    <li>
                                                        <label><span>邮件</span></label>
                                                        <input type="text" name="email" id="email"/>
                                                    </li>
                                                    <li>
                                                        <label><span>登录名</span></label>
                                                        <input onchange="checkUsername()" type="text" name="username" id="username"/>
                                                    </li>
                                                    <li>
                                                        <label><span>密码</span></label>
                                                        <input type="password" name="password" id="password"/>
                                                    </li>
                                                    <!--<li>-->
                                                    <!--    <label><span>状态</span></label>-->
                                                    <!--    <input value="1" type="text" name="userState" id="state"/>-->
                                                    <!--</li>-->
                                                    <li>
                                                        <label><span>描述</span></label>
                                                        <input type="text" name="description" id="description"/>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                                <button type="submit" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--修改模态框结束-->
                            <!--分配角色模态框开始-->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">角色分配</h4>
                                        </div>
                                        <form id="fpRoleForm" action="#" method="post">
                                            <div class="modal-body">
                                                <ul id="fpRoleModel">
                                                    <input type="hidden" name="userId" id="fpModelUserId"/>
                                                    <li th:each="role:${roleList}" >
                                                        <label><span th:text="${role.roleName}"></span></label>
                                                        <input type="checkbox" th:id="${role.roleName}" name="roleIds" th:value="${role.roleId}"/>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                                <button type="submit" onclick="fpRoleCommit()" class="btn btn-primary btn-sm">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!--分配角色模态框结束-->
                            <!--模态框结束-->

                        </tr>
                    </tbody>
                    <!--表数据开始-->
                </table>
                <!--分页-->
                <ul class="pagination right">
                    <div>
                        当前第 [[${pageInfo.pageNum}]]页，共 [[${pageInfo.pages}]] 页， 共 [[${pageInfo.total}]] 条记录
                    </div>
                    <!--上一页按钮-->
                    <li th:class="${pageInfo.getPageNum()<=1 ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()<=1}" onclick="return checkDisable(this)" href="#" th:href="@{/user/list(pageNum=${pageInfo.getPageNum()-1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}"  aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>

                    <li th:class="${pageInfo.getPageNum()==1 ? 'active' :''}"><a href="#" th:href="@{/user/list(pageNum=1,pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}">1</a></li>

                    <li ><a href="#">...</a></li>

                    <li th:if="${pageInfo.getPageNum()!=1 and pageInfo.getPageNum()!=pageInfo.getPages()}" th:class="active"><a href="#" th:text="${pageInfo.getPageNum()}"><span class="sr-only"></span></a></li>

                    <li ><a href="#">...</a></li>

                    <li th:class="${pageInfo.getPageNum()==pageInfo.getPages() ? 'active' :''}"><a href="#" th:href="@{/user/list(pageNum=${pageInfo.getPages()},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" th:text="${pageInfo.getPages()}"></a></li>

                    <!--下一页按钮-->
                    <li th:class="${pageInfo.getPageNum()>=pageInfo.getPages() ? 'disabled' :''}">
                        <a th:disabled="${pageInfo.getPageNum()>=pageInfo.getPages()}" onclick="return checkDisable(this)"  href="#" th:href="@{/user/list(pageNum=${pageInfo.getPageNum()+1},pageSize=${pageInfo.getPageSize()},option=${option},searchContent=${searchContent})}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                    </li>

                </ul>
            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>
</body>
</html>

<script src="/static/js/jquery-1.11.3.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script>
    function fpRoleCommit(){
        $.ajax({
            url:"/user-role/fpCommit",
            data:$("#fpRoleForm").serialize(),
            success:function(data){
                if(data.code===200){
                    //修改描述的内容
                }
            }
        })
    }
    function delUser(userId) {
        var url = "/user/del?userId=" + userId;
        if (confirm("您确定要删除该条记录吗?")) {
            $.ajax({
                url: url,
                type: "post"
            })
        }
    }
    //清空分配角色模态框的选择
    function clear() {
        let checkBoxes = $("#fpRoleModel").find("input")
        for (let i = 0; i < checkBoxes.length; i++) {
            checkBoxes.eq(i).prop("checked", false);
        }
    }

    //用户角色关系回显
    function roleEcho(ob) {
        //清空前一次的选择
        clear();

        //开始查询并勾选
        let aData = $(ob).parent().parent().find("td");

        //给model框隐藏域放入userId
        $("#fpModelUserId").val(aData.eq(0).text());

        $.ajax({
            url: "/user-role/FProle",
            data: {
                userId: aData.eq(0).text()
            },
            success: function (data) {
                var idSelector = "";
                for (const roleName of data.roleNameList) {
                    idSelector = "#" + roleName;
                    $(idSelector).prop("checked", true);
                }
            }
        })
    }


    //添加用户时校验用户名的唯一性
    function checkUsername() {
        console.log($("input[name='username']").val());
        $.ajax({
            url: "/user/checkUsername",
            method: "post",
            data: {
                username: $("input[name='username']").val()
            },
            //同步
            async: false,
            success: function (data) {
                console.log("狗狗汪小黄1")
                console.log(data.code);
                if (data.code===201) {
                    console.log("狗狗汪小黄2")
                    //该登录名已经使用过,那么就清空输入框中的内容
                    $("input[name='username']").val('');
                    alert(data.msg);
                }
            },
            error: function () {
                alert("服务器错误")
            }
        })
    }
    //点击修改,先进行数据存储在页面上
    function editMessage(obj) {
        //将DOM对象转换为Jquery对象,获取td标签中的值
        //  var username = $(obj).parent().parent().find('td').eq(1).text();
        var aDate = $(obj).parent().parent().find("td");
        console.log(aDate.eq(0).text());
        $("#userId").val(aDate.eq(0).text());
        $("#name").val(aDate.eq(1).text());
        $("#sex").val(aDate.eq(2).text());
        $("#tel").val(aDate.eq(3).text());
        $("#address").val(aDate.eq(4).text());
        $("#email").val(aDate.eq(5).text());
        $("#username").val(aDate.eq(6).text());
        $("#password").val(aDate.eq(7).text());
        // $("#state").val(aDate.eq(8).text());
        $("#description").val(aDate.eq(8).text());
    }

    function checkDisable(obj) {
        let attr = $(obj).attr("disabled");
        return attr !== "disabled";
    }


</script>